<template>
	<view>
		<view class="box">
			<image src="../../static/a1.png" style="width: 750rpx; height: 400rpx;" mode=""></image>
		</view>
		
		<view class="box_one" :id="ass" @click="add(1)">
			个人办事
		</view>
		
		<view class="box_one" :id="aee" @click="add(2)">
			企业办事
		</view>
		
		
		<view class="box_tow" v-if="pan==1">
			<view style="height: 80rpx;line-height: 80rpx; margin-left: 50rpx;">
				<b>按主题办事</b>
			</view>
			<image src="../../static/58.png" style="width:300rpx; height: 100rpx; margin-left: 50rpx; padding-top: 40rpx; float: left;" mode=""></image>
			<image src="../../static/59.png" style="width:300rpx; height: 100rpx; margin-left: 50rpx; padding-top: 40rpx; float: left;" mode=""></image>
			<image src="../../static/60.png" style="width:300rpx; height: 100rpx; margin-left: 50rpx; padding-top: 40rpx; float: left;" mode=""></image>
			<image src="../../static/61.png" style="width:300rpx; height: 100rpx; margin-left: 50rpx; padding-top: 40rpx; float: left;" mode=""></image>
			<image src="../../static/62.png" style="width:300rpx; height: 100rpx; margin-left: 50rpx; padding-top: 40rpx; float: left;" mode=""></image>
			<image src="../../static/63.png" style="width:300rpx; height: 100rpx; margin-left: 50rpx; padding-top: 40rpx; float: left;" mode=""></image>
			
			<view style="width: 750rpx; height: 400rpx; margin-top: 430rpx;">
				<p style="font-size: 30rpx; line-height: 30rpx; padding-left: 50rpx; line-height: 80rpx;">按部门办事
				<span style="float: right; padding-right: 50rpx; color: #272727;">查看全部></span></p>
				
				
				<view style="width: 750rpx; height: 450rpx; ">
					<scroll-view class="scroll-view_c" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view id="demo1" class="scroll-view-item_c uni-bg-red"><image src="../../static/a9.png" mode="" class="img_1"></image> </view>
						<view id="demo2" class="scroll-view-item_c uni-bg-green"><image src="../../static/a10.png" mode="" class="img_1"></image></view>
						<view id="demo2" class="scroll-view-item_c uni-bg-blue"><image src="../../static/a11.png" mode="" class="img_1"></image></view>
						<view id="demo2" class="scroll-view-item_c uni-bg-blue1"><image src="../../static/a12.png" mode="" class="img_1"></image></view>
					</scroll-view>
				</view>
				
			</view>
			
			
			<view style="width: 750rpx; height: 400rpx;">
				<view style="height: 80rpx;line-height: 80rpx; margin-left: 50rpx;">
					<b>特色服务</b>
				</view>
				<image src="../../static/a4.png" style="width: 750rpx; height: 150rpx;" mode=""></image>
				<view style="height: 80rpx;line-height: 80rpx; margin-left: 50rpx;">
					<b>政务服务地图</b>
				</view>
				<image src="../../static/a5.png" style="width: 750rpx; height: 150rpx;" mode=""></image>
			</view>
			
			<view class="box_15">
				<view class="">
					<br>
				我是有底线的
				</view>
				
			</view>
			
			<view style="width: 750rpx; height: 250rpx;">
			</view>
		</view>
	
	    <view class="box_shan" v-if="pan==2">
	    	<view style="height: 80rpx;line-height: 80rpx; margin-left: 50rpx;">
	    		<b>惠企服务</b>
	    	</view>
			<view style="width: 750rpx; height: 200rpx; ">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view id="demo1" class="scroll-view-item_H uni-bg-red"><image src="../../static/61.png" mode="" class="img"></image> </view>
					<view id="demo2" class="scroll-view-item_H uni-bg-green"><image src="../../static/62.png" mode="" class="img"></image></view>
					<view id="demo2" class="scroll-view-item_H uni-bg-blue"><image src="../../static/59.png" mode="" class="img"></image></view>
					<view id="demo2" class="scroll-view-item_H uni-bg-blue1"><image src="../../static/60.png" mode="" class="img"></image></view>
				</scroll-view>
			</view>
			<view style="height: 80rpx;line-height: 80rpx; margin-left: 50rpx;">
				<b>按主题办事</b>
			</view>
			
			<view class="box_si">
				
				<view class="box_wu">
					<image src="../../static/a6.png" style="width: 50rpx; height: 50rpx; margin-top: 25rpx; margin-left: 50rpx; margin-right:10rpx; float: left;" mode=""></image>
					<p style="line-height: 100rpx;"><b>没立变更</b> <span style="float: right; color: #8D8E8E;">更多服务></span></p>
				</view>
				
				<p class="pi">预购商品房预告登记... 抵押权首次登记...</p>
				<p class="pi">预购商品房抵押预告... 烟草专卖零售许可证...</p>
			</view>
			
			<view class="box_si">
				
				<view class="box_wu">
					<image src="../../static/a7.png" style="width: 50rpx; height: 50rpx; margin-top: 25rpx; margin-left: 50rpx; margin-right:10rpx; float: left;" mode=""></image>
					<p style="line-height: 100rpx;"><b>没立变更</b> <span style="float: right; color: #8D8E8E;">更多服务></span></p>
				</view>
				
				<p class="pi">预购商品房预告登记... 抵押权首次登记...</p>
				<p class="pi">预购商品房抵押预告... 烟草专卖零售许可证...</p>
			</view>
			
			<view class="box_si">
				
				<view class="box_wu">
					<image src="../../static/a8.png" style="width: 50rpx; height: 50rpx; margin-top: 25rpx; margin-left: 50rpx; margin-right:10rpx; float: left;" mode=""></image>
					<p style="line-height: 100rpx;"><b>没立变更</b> <span style="float: right; color: #8D8E8E;">更多服务></span></p>
				</view>
				
				<p class="pi">预购商品房预告登记... 抵押权首次登记...</p>
				<p class="pi">预购商品房抵押预告... 烟草专卖零售许可证...</p>
			</view>
			
			<view class="box_si">
				
				<view class="box_wu">
					<image src="../../static/a6.png" style="width: 50rpx; height: 50rpx; margin-top: 25rpx; margin-left: 50rpx; margin-right:10rpx; float: left;" mode=""></image>
					<p style="line-height: 100rpx;"><b>没立变更</b> <span style="float: right; color: #8D8E8E;">更多服务></span></p>
				</view>
				
				<p class="pi">预购商品房预告登记... 抵押权首次登记...</p>
				<p class="pi">预购商品房抵押预告... 烟草专卖零售许可证...</p>
			</view>
			
			
	    </view>
	</view>
</template>

<script>
	
		export default {
			data(){
				return{
					ass:'ass',
					aee:'',
					pan:1
				}
			},
			methods:{
				add(i){
					if(i==1){
						this.ass='ass'
						this.aee='',
						this.pan=1
					}else{
						this.ass=''
						this.aee='ass',
						this.pan=2
					}
					
				},
				scroll: function(e) {
								console.log(e)
								this.old.scrollTop = e.detail.scrollTop
							},
			}
		}
	
</script>

<style >
	
	.pi{
		padding-left: 50rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}
	
	.box_wu{
		width: 750rpx;
		height: 100rpx;
	}
	
	.box_si{
		width: 750rpx;
		height: 300rpx;
		background: #F8FBFF;
		margin-top: 50rpx;
	}
	
	.box{
		width: 750rpx;
		height:400rpx;
	}
	.box_one{
		width: 150rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		float: left;
		color: #010;
	}
	#ass{
		border-bottom: 10rpx solid #027AFF;
		color: #000;
	}
	
	.box_tow{
		margin-top: 100rpx;
		width: 750rpx;
		height: 700rpx;
	}
	
.lbt{
	width: 40%;
	height: 100%;
	background: #FFF3ED;
	float: left;
	margin-left: 5%;
	text-align: center;
	box-shadow:0px 5px 10px 10px #ccc inset;
}

	.box_15{
		width: 750rpx;
		height: 100rpx;
		font-size: 26rpx;
		color: #888888;
		text-align: center;
		line-height: 100rpx;
	}
	
	.box_shan{
		margin-top: 100rpx;
		width: 750rpx;
		height: 1900rpx;
	}
	
	.img{
		width: 100%;
		height: 150rpx;
	}
	
	.img_1{
		width: 100%;
		height: 300rpx;
	}
	
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 200rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 45%;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 36rpx;
		margin-left: 2.5%;
	}
	
	.scroll-view_c {
		white-space: nowrap;
		width: 100%;
		height: 300rpx;
	}
	.scroll-view-item_c {
		display: inline-block;
		width: 45%;
		height: 300rpx;
		line-height: 400rpx;
		text-align: center;
		font-size: 36rpx;
		margin-left: 2.5%;
	}
</style>